$(function() {
	//转换字符串格式  JSON.stringify()
	//字符串转换为对象格式  JSON.parse()
	// 数据存储格式 var todolist = [{title: "xxx", done: false}];
	load();
	$("#title").on("keydown",function(e) {
		if(e.keyCode === 13) {
			if($(this).val() === "") {
				alert("请输入内容");
			} else {
				// 读取本地存储数据
				var local = getData();
				//追加元素
				local.push({title: $(this).val(), done: false});
				saveData(local);
				load();
				$(this).val("");
			}
		}
	});
	//删除操作
	$("ol,ul").on("click","a",function() {
		var data = getData();
		var index = $(this).attr("id"); //获取自定义属性
		data.splice(index,1);
		saveData(data);
		load();
	});
	// 进行和完成 的操作
	$("ol,ul").on("click","input",function() {
		var data = getData();
		var index = $(this).siblings("a").attr("id");
		data[index].done = $(this).prop("checked");//获取固有属性
		saveData(data);
		load();
	});
	// 读取本地存储数据
	function getData() {
		var data = localStorage.getItem("todolist");
		if(data !== null) {
			return JSON.parse(data);
		} else {
			return [];
		}
	}
	
	//保存存储数据
	function saveData(data) {
		localStorage.setItem("todolist",JSON.stringify(data));
	}
	
	//渲染加载数据
	function load() {
		var data = getData();
		//遍历之前先清空ol里面的元素内容
		$("ol,ul").empty();
		var todoCount = 0;
		var doneCount = 0;
		//遍历数据
		$.each(data,function(i, n) {
			if(n.done) {
				$("ul").prepend("<li><input type='checkbox' checked='checked'> <p> "+n.title+" </p> <a href='javascript:;' id="+ i +"><span></span></a></li>");
				todoCount++;
			} else {
				$("ol").prepend("<li><input type='checkbox' > <p> "+n.title+" </p> <a href='javascript:;' id="+ i +"><span></span></a></li>");
				doneCount++;
			}
		});
		$("#todocount").text(todoCount);
		$("#donecount").text(doneCount);
	}
	
	
	
})